<template>
  <!-- 查询 -->
  <div class="searchBar">
    <!-- <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
        <span class="el-icon-question details-icon"></span>
    </el-tooltip> -->
    <span style="font-size: 14px"> 所属页面 ：</span>
    <el-select
      margin-lift:100px
      clearable
      @change="changevaluePage"
      v-model="dataPage"
      placeholder="请选择"
    >
      <el-option
        v-for="item in tablePage"
        :key="item.id"
        :label="item.dataSourceType"
        :value="item.id"
      ></el-option>
    </el-select>

    <span style="font-size: 14px" class="onebox"> 提示目标 ：</span>
    <!-- 清空， 选中变化触发， 双向绑定， 提示信息 -->
    <el-select
      clearable
      :disabled="Disable"
      @change="changevalue"
      v-model="dataPanel"
      placeholder="请选择"
    >
      <!-- 循环， 绑定 key 值， 分组的名字， 选项的值 -->
      <el-option
        v-for="item in tableData"
        :key="item.id"
        :label="item.dataSourceType"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-button
      style="margin-left: 30px"
      type="primary"
      size="small"
      @click="inquire"
      >搜索</el-button
    >
    <el-button
      style="margin-left: 30px"
      type="primary"
      size="small"
      @click="search"
      >添加</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      Disable: true,
      // 所属页面
      tablePage: [
        {
          id: 1,
          dataSourceType: "交易看板",
        },
        {
          id: 2,
          dataSourceType: "核心看板",
        },
        {
          id: 3,
          dataSourceType: "行为看板",
        },
        {
          id: 4,
          dataSourceType: "增长看板",
        },
      ],
      // 表格数据
      dataPanel: "",
      // 所属页面
      dataPage: "",
      // 向后台传的分页数据
      name: {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: null,
      },
      //表格数据
      tableData: [
        {
          id: 1,
          dataSourceType: "下单金额",
        },
        {
          id: 2,
          dataSourceType: "下单用户数",
        },
        {
          id: 3,
          dataSourceType: "下单订单量",
        },
        {
          id: 4,
          dataSourceType: "付费金额",
        },
        {
          id: 5,
          dataSourceType: "付费用户数",
        },
        {
          id: 6,
          dataSourceType: "付费订单量",
        },
      ],
    };
  },
  props: {
    // tableData: {
    //   type: Array,
    //   default: () => {},
    // },
  },
  methods: {
    //   提示目标
    changevalue() {
        // console.log(this.dataPanel);
    },
    //   所属页面
    changevaluePage() {
      if (this.dataPage != "") {
        this.Disable = false;
        // console.log(this.dataPage);
      } else {
        this.Disable = true;
        this.dataPanel = "";
      }
    },
    //搜索
    inquire() {
      this.name.pageNum = 1;
      this.name.pageSize = 10;
      this.name.dataSourceType = this.dataPanel;
      this.$emit("PagingQueryAssignment", this.name);
    },
    // 添加按钮事件
    search() {
      this.$router.push('/conf-center/NewPage')
      // this.$emit("ResetData", true);
      // this.$emit("isEditTable", false);
      // this.$emit("Modify", "添加");
      // this.$emit("isDialog", true);
    },
  },
};
</script>

<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
.el-icon-question {
  color: rgb(182, 177, 177);
}
.onebox {
  margin-left: 30px;
}
</style>